<!--  预算财年-->
<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />
    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <!-- 操作按钮区域 -->
          <div class='table-operator'>
            <a-button type='primary' @click='handleAddStore'>新增</a-button>
            <a-button type='primary' @click='batchDel'>删除</a-button>
            <a-button type='primary' @click="stateChange(1)">启用</a-button>
            <a-button type='primary' @click="stateChange(0)">禁用</a-button>
          </div>
        </template>
        <template #bgYear='{ row,rowIndex }'>
          <a @click="handleAddStore(row,'详情')">{{ row.bgYear }}</a>
        </template>
        <template #action='{ row,rowIndex }'>
          <a @click='handleAddStore(row,"编辑")'>编辑</a>
        </template>
        <template #status='{ row }'>
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->
    <form-add-edit ref='popupForm' @quarter='handleQuarter' @ok='modalFormOk'></form-add-edit>
  </a-card>

</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@api/manage'
import formAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import JEllipsis from '@/components/cn-form/JEllipsis'

let monthList = {
  1: [
    {
      name: '01',
      value: '01'
    }, {
      name: '02',
      value: '02'
    }, {
      name: '03',
      value: '03'
    }],
  2: [
    {
      name: '04',
      value: '04'
    }, {
      name: '05',
      value: '05'
    }, {
      name: '06',
      value: '06'
    }],
  3: [
    {
      name: '07',
      value: '07'
    }, {
      name: '08',
      value: '08'
    }, {
      name: '09',
      value: '09'
    }],
  4: [
    {
      name: '10',
      value: '10'
    }, {
      name: '11',
      value: '11'
    }, {
      name: '12',
      value: '12'
    }]
}
export default {
  name: 'tmrBudgetYear',
  mixins: [PageListMixin],
  components: {
    formAddEdit, JEllipsis
  },
  data() {
    return {
      description: '预算财年页面',
      searchConfig: [
        {
          type: 'j-select',
          dictCode: 'budget_year',
          name: 'bgYear',
          // option:[],
          placeholder: '预算财年'
        }, {
          type: 'a-select',
          name: 'bgQuarter',
          option: [],
          placeholder: '季度'
        }, {
          type: 'a-select',
          name: 'bgMonth',
          option: [],
          placeholder: '月度'
        }, {
          type: 'a-select',
          name: 'status',
          option: [{
            name: '启用',
            value: '1'
          }, {
            name: '停用',
            value: '0'
          }],
          placeholder: '状态'
        }],
      // 表头
      columns: [
        { type: 'checkbox', width: 60, fixed: 'left' },
        {
          title: '预算财年',
          field: 'bgYear',
          minWidth: 80,
          slots: { default: 'bgYear' }
        },
        {
          title: '季度',
          field: 'bgQuarter',
          minWidth: 80
        },
        {
          title: '月度',
          field: 'bgMonth',
          minWidth: 80
        },
        {
          title: '开始日期',
          minWidth: 120,
          field: 'startDate'
        },
        {
          title: '结束日期',
          minWidth: 120,
          field: 'endDate'
        },
        {
          title: '备注',
          minWidth: 80,
          field: 'remarks',
        },
        {
          title: '创建人',
          minWidth: 100,
          field: 'createName'

        },
        {
          title: '创建时间',
          minWidth: 120,
          field: 'createTime'
        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName'

        },
        {
          title: '更新时间',
          minWidth: 120,
          field: 'updateTime'
        },
        {
          title: '状态',
          field: 'status',
          minWidth: 100,
          fixed: 'right',
          slots: { default: 'status' },
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 110,
          fixed: 'right',
          slots: { default: 'action' },
        }
      ],
      yearOp: [],
      quarterOp: [],
      monthOp: [],
      monthList,
      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/findPageList',
        // 详情接口
        detail: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/deleteBatch',
        // 导出接口
        exportXlsUrl: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/deleteBatch',
        // 删除接口
        deleteBatch: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/deleteBatch',
        // 启停用接口
        status: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/startOrStop',
        startOrStopUrl: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetYear/startOrStop',
      }
    }
  },
  created() {
    // 生成预算年度
    // let nowYear=new Date().getFullYear()
    // let op=[]
    // for (let i=0;i<=10;i++){
    //   op.push({name:nowYear+i,value:nowYear+i+''})
    // }
    // this.yearOp=op
    // this.searchConfig[0].option=op

    let quarter = [
      {
        name: '一季度',
        value: '1'
      },
      {
        name: '二季度',
        value: '2'
      },
      {
        name: '三季度',
        value: '3'
      },
      {
        name: '四季度',
        value: '4'
      }
    ]
    this.quarterOp = quarter
    this.searchConfig[1].option = quarter
    // 生成预算月度
    let month = [
      {
        name: '01',
        value: '01'
      }, {
        name: '02',
        value: '02'
      }, {
        name: '03',
        value: '03'
      }, {
        name: '04',
        value: '04'
      }, {
        name: '05',
        value: '05'
      }, {
        name: '06',
        value: '06'
      }, {
        name: '07',
        value: '07'
      }, {
        name: '08',
        value: '08'
      }, {
        name: '09',
        value: '09'
      }, {
        name: '10',
        value: '10'
      }, {
        name: '11',
        value: '11'
      }, {
        name: '12',
        value: '12'
      }]
    this.monthOp = month
    this.searchConfig[2].option = month
  },
  watch: {},
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // }
  },
  methods: {
    handleAddStore(record, title='新增') {
      let config = {
        title: title,
        width: 500,
        disableSubmit:title=='详情'?true:false,
        addOrUpdateUrl: `${window._CONFIG['domianTpmURL']}/budget/tpmBudgetYear/saveOrUpdate`,  //审核地址
        method: 'post',
        list: [
          {
            label: '年度',
            type: 'j-select',
            dictCode: 'budget_year',
            placeholder: '请选择年度',
            fun: 'quarter',
            name: 'bgYear',  // 后台接受字段
            disabled:title=='详情'?true:false,
            check: { rules: [{ required: true, message: '请选择年度' }] }

          },
          {
            label: '季度',
            type: 'a-select',
            placeholder: '请选择季度',
            fun: 'quarter',
            name: 'bgQuarter',  // 后台接受字段
            disabled:title=='详情'?true:false,
            // check: { rules: [{ required: true, message: '请选择季度' }] },
            option: this.quarterOp
          },
          {
            label: '月度',
            type: 'a-select',
            fun: 'quarter',
            placeholder: '请选择月度',
            disabled:title=='详情'?true:false,
            name: 'bgMonth',  // 后台接受字段
            // check: { rules: [{ required: true, message: '请选择月度' }] },
            option: []
          },
          {
            label: '日期时间',
            type: 'date-range',
            range: ['startDate', 'endDate'],// 后台接受字段
            placeholder: ['开始时间', '结束时间'],
            disabled:title=='详情'?true:false,
            name: ['startDate', 'endDate'],
            check: { rules: [{ required: true, message: '选择时间' }] }
          },
          {
            label: '备注',
            type: 'textarea',
            disabled:title=='详情'?true:false,
            placeholder: '请输入备注',
            name: 'remarks'  // 后台接受字段
            // check: { rules: [{ required: true, message: '请选择月度' }] },
          }

        ]
      }
      record.date = [record.startDate, record.endDate]
      this.$refs.popupForm.edit(record, config)
    },
    handleQuarter(e) {
      this.$refs.popupForm.config.list[2].option = this.monthOp
      this.$refs.popupForm.form.resetFields(['date'])
      this.$refs.popupForm.model.stratDate = ''
      this.$refs.popupForm.model.endDate = ''
    },
    handlePageChange(page, pageSize) {
      this.ipagination.current = page
      this.loadData()
    },
    handleSizeChange(current, size) {
      this.ipagination.pageSize = size
      this.loadData()
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

/deep/ .ant-pagination {
  float: right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}

</style>